<template>
  <div v-loading="loading">
    <queryHead v-if="head" :explain="explain" :result="msg" :time="time" :price="price" @query="query"/>
    <div v-if="lock" style="background-color: #f3f0f0;padding: 5px;border-radius: 5px">
      <table id="sfhy">
        <tbody>
        <tr>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/mon.png">
              <p>贷款总机构数</p>
              <p class="mg">{{
                  jxzs.hasOwnProperty('xyp_cpl0001') ? jxzs.xyp_cpl0001 == '1' ? '(0,9)' : jxzs.xyp_cpl0001 == '2' ? '[9,14)' : jxzs.xyp_cpl0001 == '3' ? '[14, Inf)' : '暂无数据' : '未命中'
                }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/ljg.e0e33905.png">
              <p>消费金融类机构数(有场景的、分期)</p>
              <p class="mg"> {{
                  jxzs.hasOwnProperty('xyp_cpl0007') ? jxzs.xyp_cpl0007 == '1' ? '(0,1)' : jxzs.xyp_cpl0007 == '2' ? '[1,2)' : jxzs.xyp_cpl0007 == '3' ? '[2,4)' : jxzs.xyp_cpl0007 == '4' ? '[4, Inf)' : '暂无数据' : '未命中'
                }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/rl.png">
              <p>网络贷款类机构数(现金贷)</p>
              <p class="mg"> {{
                  jxzs.hasOwnProperty('xyp_cpl0008') ? jxzs.xyp_cpl0008 == '1' ? '(0,1)' : jxzs.xyp_cpl0008 == '2' ? '[1,5)' : jxzs.xyp_cpl0008 == '3' ? '[5,11)' : jxzs.xyp_cpl0008 == '4' ? '[11, Inf)' : '暂无数据' : '未命中'
                }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/ljg.e0e33905.png">
              <p>最近1天是否发生过逾期</p>
              <p class="mg"> {{
                  jxzs.hasOwnProperty('xyp_cpl0028') ? jxzs.xyp_cpl0028 == '1' ? '逾期' : jxzs.xyp_cpl0028 == '0' ? '未逾期' : '暂无数据' : '未命中'
                }}</p>
            </div>
          </td>
        </tr>
        <tr>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/smjg.png">
              <p>最近7天是否发生过逾期</p>
              <p class="mg"> {{
                  jxzs.hasOwnProperty('xyp_cpl0029') ? jxzs.xyp_cpl0029 == '1' ? '逾期' : jxzs.xyp_cpl0029 == '0' ? '未逾期' : '暂无数据' : '未命中'
                }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/lbs.edc3a807.png">
              <p>最近14天是否发生过逾期</p>
              <p class="mg"> {{
                  jxzs.hasOwnProperty('xyp_cpl0030') ? jxzs.xyp_cpl0030 == '1' ? '逾期' : jxzs.xyp_cpl0030 == '0' ? '未逾期' : '暂无数据' : '未命中'
                }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/ychk.png">
              <p>最近30天是否发生过逾期</p>
              <p class="mg"> {{
                  jxzs.hasOwnProperty('xyp_cpl0031') ? jxzs.xyp_cpl0031 == '1' ? '逾期' : jxzs.xyp_cpl0031 == '0' ? '未逾期' : '暂无数据' : '未命中'
                }}</p>
            </div>
          </td>
          <td>
            <div class="wc">
              <img src="@/assets/images/report/lje.59b6af0b.png">
              <p>当前逾期机构数</p>
              <p class="mg"> {{
                  jxzs.hasOwnProperty('xyp_cpl0071') ? jxzs.xyp_cpl0071 == '1' ? '逾期' : jxzs.xyp_cpl0071 == '0' ? '未逾期' : '暂无数据' : '未命中'
                }}</p>
            </div>
          </td>
        </tr>
        <tr>
          <td colspan="2">
            <div class="wc">
              <img src="@/assets/images/report/smjg.png">
              <p>当前逾期金额</p>
              <p class="mg"> {{
                  jxzs.hasOwnProperty('xyp_cpl0072') ? jxzs.xyp_cpl0072 == '1' ? '(0,1000)' : jxzs.xyp_cpl0072 == '2' ? '[1000,2000)' : jxzs.xyp_cpl0072 == '3' ? '[2000,3000)' :
                    jxzs.xyp_cpl0072 == '4' ? '[3000,5000)' : jxzs.xyp_cpl0072 == '5' ? '[5000,7000)' : jxzs.xyp_cpl0072 == '6' ? '[7000,11000)' :
                      jxzs.xyp_cpl0072 == '7' ? '[11000,Inf)' : '暂无数据' : '未命中'
                }}</p>
            </div>
          </td>
          <td colspan="2">
            <div class="wc">
              <img src="@/assets/images/report/lbs.edc3a807.png">
              <p>当前是否存在逾期未结清</p>
              <p class="mg"> {{
                  jxzs.hasOwnProperty('xyp_cpl0044') ? jxzs.xyp_cpl0044 == '1' ? '逾期' : jxzs.xyp_cpl0044 == '0' ? '未逾期' : '暂无数据' : '未命中'
                }}</p>
            </div>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
  import queryHead from "@/views/components/queryHead.vue";
  import {queryRecord, queryData} from "@/api/system/query";
  export default {
    components: {queryHead},
    name: "jxzs",
    props: {
      queryData: {
        required: true,
        type: Object
      },
      price: {
        default: null,
        type: Number
      },
      priceType: {
        default: null,
        type: Boolean
      },
      explain: {
        default: null,
        type: String
      },
      head: {
        default: true,
        type: Boolean
      }
    },
    data() {
      return {
        loading: false,
        lock: false,

        msg: undefined,
        time: undefined,

        jxzs: {}
      }
    },
    created() {
      this.loading = true
      queryRecord(this.queryData).then(response => {
        this.disResponse(response)
      })
    },
    methods: {
      query() {
        this.loading = true
        queryData(this.queryData).then(response => {
          this.disResponse(response)
        })
      },
      disResponse(response) {
        console.log('--jxzs--', response)
        if (response.info) {
          this.time = response.time
          const data = JSON.parse(response.info)
          this.msg = data.retmsg
          if (data.retcode == '000000' || data.retcode == '100000') {
            this.jxzs = data.retdata
            // console.log('--this.jxzs--', this.jxzs)
            this.lock = true
          }
        }
        this.loading = false
      }
    }
  }
</script>

<style scoped>
  .title {
    text-align: center;
    line-height: 27.33px;
    font-size: 14px;
    margin: 0;
  }

  #explain {
    font-weight: bold;
    text-align: center;
    margin: 10px 0;
  }

  #sfhy {
    margin: 10px auto;
    width: 100%;
    border-radius: 10px;
  }

  #sfhy td {
    padding: 1px;
    width: 25%;
  }

  .wc {
    background-color: #F8F8F8;
    border-radius: 10px;
    padding: 5px 10px;
  }

  .wc img {
    width: 25px;
    height: 25px;
    vertical-align: middle;
  }

  .wc p {
    display: inline-block;
    font-size: 14px;
  }

  .mg {
    float: right;
    font-weight: bold;
  }
</style>


